import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
declare var $: any;

@Component({
    selector: 'time-range-picker',
    templateUrl: './time-range-picker.html',
    styleUrls: ['./time-range-picker.css']
})
/**
 * 日期选择组件 初始化...
 */
export class TimeRangePickerComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
        this.initDatePicker($('#DateTimeRange'));
    }

    getTime(): Array<String> {
        const timerange: String = $('#DateTimeRange').val();
        const timeArray: Array<String> = timerange.split(' - ');
        return timeArray;
    }

    initDatePicker(object: any): void {
        object.daterangepicker(
            {
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 10,
                timePickerSeconds: true,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    applyLabel: '应用',
                    cancelLabel: '取消',
                    customRangeLabel: '自定义',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',

                },
                applyClass: 'btn-sm btn-success',
                cancelClass: 'btn-sm btn-default',
                ranges: {
                    '今日': [moment().startOf('day'), moment()],
                    '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    '当周': [moment().startOf('week'), moment()],
                    '上周': [moment().subtract(1, 'weeks').startOf('week'), moment().subtract(1, 'weeks').endOf("week")],
                    '当月': [moment().startOf('month'), moment()],
                    '当年': [moment().startOf('year'), moment()]
                },
                startDate: moment().startOf('month'),
                endDate: moment()
            },
            function (start: any, end: any) {
                object.find('span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
            });
    }

}